<template>
  <view class="page">
    <view class="page-bg">
      <image
        style="width: 100%; height: 597rpx"
        src="https://test.uaima.cn/public/static/img/bg.png"
        mode=""
      ></image>
    </view>
    <view
      class="page-location"
      :style="{ paddingTop: `${statusBarHeight + 10}px` }"
    >
      <image
        class="page-location-icon"
        src="https://test.uaima.cn/public/static/icon/location.png"
        mode=""
      ></image>
      <text style="padding: 0 6rpx; font-size: 28rpx; color: #151515">
        {{ locationText }}
      </text>
      <image
        style="width: 28rpx; height: 19rpx; margin-top: 5rpx"
        src="https://test.uaima.cn/public/static/icon/arrow-down-fill.png"
        mode=""
      >
      </image>
    </view>
    <view class="page-swiper">
      <u-swiper
        :list="swiperList"
        indicator
        height="320rpx"
        indicatorMode="dot"
      ></u-swiper>
    </view>
    <view class="page-classify">
      <view
        class="page-classify-item"
        v-for="item in classifyList"
        :key="item.id"
        @click="route_classify(item)"
      >
        <u--image
          :showLoading="true"
          radius="40rpx"
          :src="item.goldenPic"
          width="108rpx"
          height="108rpx"
          bgColor="#ffffff"
        ></u--image>
        <text
          style="
            font-weight: 400;
            font-size: 26rpx;
            color: #333333;
            padding-top: 24rpx;
          "
          >{{ item.cateName }}</text
        >
      </view>
    </view>
    <view class="page-commodityList" v-if="commodityList.length > 0">
      <view class="page-commodityList-title">
        <view style="font-weight: 400; font-size: 36rpx; color: #151515">
          推荐商品
        </view>
        <view class="page-commodityList-title-option" @click="route_type">
          <text style="font-weight: 400; font-size: 26rpx; color: #666666"
            >查看更多</text
          >
          <image
            style="width: 40rpx; height: 40rpx"
            src="https://test.uaima.cn/public/static/icon/arrow-right-top-green.png"
            mode=""
          ></image>
        </view>
      </view>
      <view class="page-commodityList-content">
        <view
          class="page-commodityList-content-item"
          v-for="(item, index) in commodityList"
          :key="item.id"
          @click="route_product(item)"
        >
          <u--image
            :showLoading="true"
            radius="8rpx"
            :src="item.image"
            width="330rpx"
            height="330rpx"
          ></u--image>
          <view class="page-commodityList-content-item-title">
            {{ item.storeName }}
          </view>
          <view class="page-commodityList-content-item-info">
            {{ item.storeInfo }}
          </view>
          <view class="page-commodityList-content-item-price">
            <view>
              <text style="font-size: 24rpx">￥</text>
              <text> {{ item.price }} </text>
            </view>
            <image
              @click.stop="appendCard(item)"
              style="width: 57rpx; height: 57rpx"
              src="https://test.uaima.cn/public/static/icon/shopping-trolley-green.png"
              mode=""
            >
            </image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import msg from "@/utils/msg.js";
export default {
  data() {
    return {
      statusBarHeight: 0,
      locationText: "北京市",
      swiperList: [
        "https://cdn.uviewui.com/uview/album/1.jpg",
        "https://cdn.uviewui.com/uview/album/2.jpg",
        "https://cdn.uviewui.com/uview/album/3.jpg",
      ],
      classifyList: [],
      commodityList: [],
    };
  },
  onLoad() {
    this.getCanvas();
    this.getHeight();
    this.getLocation();
    this.category();
    this.products();
    this.getCarousel();
  },
  methods: {
    getCanvas() {
      this.$iApi.getCanvas({
        canvasId: 11,
        terminal: 1
      }).then((res) => {
        console.log('12312312321', res);
      }); 
    },
    // 轮播图
    getCarousel() {
      this.$iApi.getCarousel().then((res) => {
        console.log(res);
        if (res) {
          // res.forEach((val) => {
            // this.swiperList.push(val.url);
          // });
        }
      });
    },
    route_type() {
      uni.switchTab({
        url: "/pages/classify/index",
      });
    },
    appendCard(item) {
      this.$iApi.productsDetail(item.id).then((res) => {
        console.log(res.data.productValue);
        let firstKey = Object.keys(res.data.productValue)[0]; // 获取第一个键
        let firstProduct = res.data.productValue[firstKey]; // 获取对应的值
        console.log(firstProduct);
        if (firstProduct) {
          this.$iApi
            .cartAdd({
              cartNum: 1,
              productId: item.id,
              uniqueId: firstProduct.unique,
            })
            .then((res) => {
              msg.toast("已加入购物车");
            });
        }
      });
    },
    // 分类
    category() {
      this.$iApi.category().then((res) => {
        this.classifyList = res.data;
      });
    },
    // 推荐商品
    products() {
      this.$iApi.products().then((res) => {
        this.commodityList = res.data;
      });
    },
    route_classify(item) {
      uni.navigateTo({
        url: "/pages/classify/index" + `?id=${item.id}`,
      });
    },
    route_product(item) {
      uni.navigateTo({
        url: "/pages/product/index" + `?id=${item.id}`,
      });
    },
    // 获取微信右上角胶囊高度
    getHeight() {
      const systemInfo = uni.getSystemInfoSync();
      this.statusBarHeight = systemInfo.statusBarHeight;
    },
    // 获取当前位置
    getLocation() {
      uni.getLocation({
        type: "wgs84",
        success: (res) => {
          const latitude = res.latitude;
          const longitude = res.longitude;
        },
      });
    },
  },
};
</script>

<style>
page {
  background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.page {
  &-bg {
    position: fixed;
    top: 0;
    width: 100%;
    height: 597rpx;
  }

  &-location {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    padding-left: 30rpx;

    &-icon {
      width: 40rpx;
      height: 40rpx;
    }
  }

  &-swiper {
    padding: 32rpx 28rpx 60rpx 28rpx;
    border-radius: 24rpx;
  }

  &-classify {
    position: relative;
    z-index: 1;
    padding: 0 40rpx;
    display: flex;
    flex-wrap: wrap;
    gap: 40rpx 79rpx;

    &-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }

  &-commodityList {
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    background: #ffffff;
    padding-bottom: 60rpx;
    position: relative;
    z-index: 1;

    &-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 40rpx 40rpx 0 0;
      padding: 45rpx 30rpx;
      margin-top: 49rpx;

      &-option {
        display: flex;
        align-items: center;
      }
    }

    &-content {
      display: flex;
      flex-wrap: wrap;
      gap: 21rpx 30rpx;
      padding: 0 30rpx;

      &-item {
        display: flex;
        flex-direction: column;

        &-title {
          font-weight: 400;
          font-size: 30rpx;
          color: #333333;
          padding: 30rpx 0 11rpx 0;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }

        &-info {
          width: max-content;
          font-weight: 400;
          font-size: 22rpx;
          color: #666666;
          background: rgba(237, 123, 66, 0.06);
          border-radius: 4rpx;
          border: 1rpx solid rgba(237, 123, 66, 0.3);
          padding: 6rpx 10rpx;
          font-weight: 400;
          font-size: 24rpx;
          color: #ed7b42;
          line-height: 30rpx;
        }

        &-price {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-top: 15rpx;
          font-size: 32rpx;
          color: #ed7b42;
        }
      }
    }
  }
}
</style>
